<template>
  <el-table
    v-loading="loading"
    :data="tableData"
    class="table-common"
    element-loading-text="加载中..."
    max-height="1500"
    :height="height"
    v-bind="$attrs"
    @sort-change="sortChange"
    @select="handleSelect"
    @select-all="handleSelectAll"
    ref="tableRef"
  >
    <template v-for="(item,colIndex) in columns" :key="colIndex">
      <el-table-column v-if="item.prop==='defaultAction'" :fixed="item.fixed" :label="item.label" width="140">
        <template #default="scope">
          <el-button link size="small" type="primary" @click="editRow(scope)">编辑</el-button>
          <el-popconfirm title="你确定要删除吗?" @confirm="delRow(scope)">
            <template #reference>
              <el-button link size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
          <template v-if="item.disable">
            <el-popconfirm
              :title="`你确定要${scope.row[item.disable.key] === item.disable.disableValue ? '启用' : '禁用'}吗?`"
              @confirm="disableRow(scope)"
            >
              <template #reference>
                <el-button link size="small" type="warning">
                  {{ scope.row[item.disable.key] === item.disable.disableValue ? '启用' : '禁用' }}
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="item.type==='selection'"
        type="selection"
        width="60"
        :fixed="item.fixed"
        :align="item.align"
        :reserve-selection="item.reserveSelection"
      ></el-table-column>
      <el-table-column
        v-else-if="item.type==='index' && !!pagination"
        type="index"
        :index="index => (pagination.currentPage - 1) * pagination.pageSize + index + 1"
        :label="item.label"
        :width="item.width"
        :fixed="item.fixed"
        :align="item.align"
      ></el-table-column>
      <el-table-column
        v-else-if="item.type==='index'"
        type="index"
        :index="item.index"
        :label="item.label"
        :width="item.width"
        :fixed="item.fixed"
        :align="item.align"
      ></el-table-column>
      <el-table-column
        v-else
        :type="item.type"
        :index="item.index"
        :label="item.label"
        :column-key="item.prop"
        :prop="item.prop"
        :width="item.width"
        :min-width="item.minWidth"
        :fixed="item.fixed"
        :sortable="item.sortable"
        :resizable="item.resizable"
        :formatter="item.formatter"
        :show-overflow-tooltip="item.ellipsis"
        :align="item.align"
        :header-align="item.headerAlign"
        :class-name="item.className"
        :label-class-name="item.labelClassName"
      >
        <template v-if="!item.formatter" #default="scope">
          <slot :index="scope.$index" :name="item.prop" :column="scope.column" :row="scope.row">
            {{ scope.row[scope.column.columnKey]}}<br>
            <!-- 7-21新增一组用于格式化显示时间差的代码 -->
            <!-- 该代码无法计算 03:00+1 这样的格式，需要后端接口传递数据的时候做手动处理 -->
            <!-- 即给与前端2个值，一个用于显示的值03:00+1 一个用于计算的值  04:00 -->
            <el-text type="warning" v-if="item.diff === '0'">
              <el-icon><Timer /></el-icon>
              <span v-if=" dayjs.duration(-dayjs(new Date(scope.row[item.startTime]))
                       .diff(new Date(scope.row[item.endTime]),'minute'),'minutes')
                       .format('D')==0">
                延误 {{
                  dayjs.duration(-dayjs(new Date(scope.row[item.startTime]))
                       .diff(new Date(scope.row[item.endTime]),'minute'),'minutes')
                       .format('H小时mm分')
                }}
              </span>
              <span v-else>
                延误 {{
                  dayjs.duration(-dayjs(new Date(scope.row[item.startTime]))
                       .diff(new Date(scope.row[item.endTime]),'minute'),'minutes')
                       .format('D天H小时mm分')
                }}
              </span>
            </el-text>
          </slot>
        </template>
      </el-table-column>
    </template>
    <template #empty>
      <el-empty :image-size="80" description="暂无数据"/>
    </template>
  </el-table>
  <div style="height: 30px; text-align: right;">
    <slot name="link"></slot>
  </div>
  <template v-if="!!pagination">
    <TablePagination
      :small="$attrs.size!=='large'"
      :pagination="pagination"
      @current-change="currentChange"
      @size-change="sizeChange"
    />
  </template>
</template>

<script setup>
import { useAttrs,ref } from 'vue'
import TablePagination from '@/components/TablePagination/index.vue'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import duration from 'dayjs/plugin/duration'
import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(duration)
dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

const attrs = useAttrs()
defineProps({
  columns: {
    type: Array,
    required: true,
    default: () => ([])
  },
  tableData: {
    type: Array,
    required: true,
    default: () => ([])
  },
  pagination: {
    type: [Object, Boolean],
    default: () => ({
      currentPage: 1,
      pageSize: 10,
      total: 0
    })
  },
  loading: {
    type: Boolean,
    default: false
  }
})
const height = attrs.height ? attrs.height : 550 // 此属性为自定义高度
const emits = defineEmits(['current-change', 'size-change', 'edit-row', 'del-row', 'disable-row', 'sort-change', 'select', 'select-all'])

// ============ 分页
const currentChange = (value) => {
  emits('current-change', value)
}
const sizeChange = (value) => {
  emits('size-change', value)
}
// ============ 表格列表自定义action
const editRow = (scope) => {
  emits('edit-row', scope.row, scope.column)
}
const delRow = (scope) => {
  emits('del-row', scope.row, scope.column)
}
const disableRow = (scope) => {
  emits('disable-row', scope.row, scope.column)
}
// ========== 表格排序
const sortChange = ({ column, prop, order }) => {
  emits('sort-change', { column, prop, order })
}
const handleSelect = (selection, row) => {
  emits('select', selection, row)
}
const handleSelectAll = (selection) => {
  emits('select-all', selection)
}
const tableRef=ref();
function clearSort(){
  tableRef.value.clearSort()
}
defineExpose({
  clearSort,
});
</script>

<style lang="less">
.table-common {
  width: 100%;

  --el-table-header-bg-color: #F3F4F7;
  --el-table-header-text-color: #353A42;
  --el-table-row-hover-bg-color: #ebf7ff;
  --el-table-text-color: #535862;
  &.el-table--large {
    .el-table__header-wrapper {
      .el-table__cell {
        padding: 16px 0;
      }
    }
    .el-table__body-wrapper {
      .el-table__cell {
        padding: 15px 0;
      }
    }
  }
}
</style>
